Working with Positioning and Block Properties
The positioning properties allow you to set the position of elements in a Web page. The block properties allow you to set various options for a block of elements enclosed inside an HTML element box.
Positioning and Block Properties
|
Property |
Description |
|---|---|
|
top, right, bottom, and left |
Specifies how far a box’s top, right, bottom, and left content edges should be offset from the corresponding edges of the box’s containing area. You can set each of these properties to auto or specify these in the form of a length or percentage value. |
|
direction |
Specifies the direction in which text will be written inside an HTML blocks as well as the direction of the embeddings and overrides for the Unicode bidirectional algorithm. You can set this property to ltr (left to right) or rtl (right to left). |
|
Display |
Specifies how the contents of a block should be created. You can set this property to none, inline, block, list-item, run-in, compact, marker, table, inline-table, table-tow-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, tabl-cell, or table-caption. |
|
Float |
Specifies if a box should float to the lft, right, or not at all of a Web page. You can set this property to none, left, or right. |
|
position |
Sets the position of an HTML element such as left and right. You can set this property to static, relative, absolute, or fixed. |
|
unicode-bidi |
Specifies the level of embedding with respect to the bidirectional algorithm. It handles embedded elements with reversed Unicode order. You can set this property to normal, embed, or bidi-override. |
|
z-index |
Specifies the stacking level of the box in the stacking order for positioned boxes. You can set this property to auto or an integer value. |
Let’s now learn to position HTML elements using relative positioning. go through next button: